<script setup>
import { storeToRefs } from 'pinia'
import { groupBy } from 'lodash-es'
import { emitter } from '@/utils/index'
import { useDemoStore } from '@/store'
import { SystemApi } from '@/api'

defineProps({
  msg: String,
})

const storeDemo = useDemoStore()

const { storeCount, doubleStoreCount } = storeToRefs(storeDemo)
const { increment } = storeDemo

const count = ref(0)

function doDemoButtonClick() {
  count.value++
  emitter.emit('mitt-demo', { msg: 'Emit From HelloStarter Component🎉' })
}

const { data: systemInfo } = useRequest(SystemApi.getSystemInfo)

const { data: systemInfo2, loading, run: doRequest } = useRequest(SystemApi.getSystemInfo, {
  manual: true,
  initialData: {
    init: '尚未发起请求',
  },
})

const groubByData = groupBy([{ type: '1', value: 'blue' }, { type: '2', value: 'big' }, { type: '1', value: 'red' }], 'type')

onMounted(() => {
  SystemApi.getSystemInfo().then((res) => {
    console.log('SystemApi.getSystemInfo', res)
  })
})
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="doDemoButtonClick">
      count is {{ count }}
    </button>
    <button type="button" @click="increment">
      store count is {{ storeCount }}, double is {{ doubleStoreCount }}
    </button>
    <button type="button" @click="doRequest">
      手动发起请求
    </button>
  </div>
  <div text-lg text-green5>
    UNOCSS
  </div>

  <n-alert title="Info 类型" type="info">
    NaiveUI Alert组件 + 自动按需引入的SVG图标<i i-svg-planet />
  </n-alert>
  <div class="flex justify-between">
    <pre>{{ JSON.stringify(groubByData, null, 2) }}</pre>
    <div>
      <pre>{{ JSON.stringify(systemInfo, null, 2) || '尚未自动请求' }}</pre>
    </div>
    <div>
      <pre v-if="!systemInfo2.data && !loading">{{ systemInfo2.init }}</pre>
      <pre v-else-if="systemInfo2.data && !loading">{{ JSON.stringify(systemInfo2, null, 2) }}</pre>
      <div v-show="loading">
        Loading...
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
h1 {
  color: $color-primary;
}

.card {
  button {
    background-color: #e0e0e0;
    border-radius: 10px;
    box-shadow: 7px 7px 21px #b3b3b3, -7px -7px 21px #fff;
    transition: filter, width 240ms ease-in-out;
    will-change: filter, width;

    &:hover {
      filter: drop-shadow(0 0 0.5em #646cffaa);
    }

    &+button {
      margin-left: 20px;
    }
  }
}
</style>
